<template>
    <!-- 跳外部链接 -->
    <view class="font-24">
		<web-view :webview-styles="webviewStyles" :src="url" v-if="!isWeiXinUrlTaoBao"></web-view>
		<!-- #ifdef H5 -->
		<view class="mask-percent-s" v-else>
		    <view class="J-weixin-tip weixin-tip"><view class="weixin-tip-content"></view></view>
		    <view class="J-weixin-tip-img weixin-tip-img" :class="platform == 'android' ? 'android' : 'iphone'"></view>
		    <view class="text-white w-100 flex-center">
		        <text class="line-h-lg">
		            由于微信限制，请按以下步骤操作
		            1、点击右上角“...”
		            2、选择“在{{platform == 'android'?'浏览器':'safari'}}打开”
		        </text>
		    </view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
    data() {
        return {
            url: '',
            webviewStyles: {
                progress: {
                    // color: '#FF3333'
                }
            },
			platform:'', // 用户手机系统类型 安卓、苹果
        }
    },
	computed: {
		isWeiXinUrlTaoBao(){
			let flag = false
			// 如果是微信浏览器里打开并且url里有taobao字样
			if ((this.$utils.getUa().isWeixin && this.url.indexOf('taobao') != -1)) {
				flag = true
			}
			return flag
        },

	},
    onLoad(option) {
		this.platform = uni.getSystemInfoSync().platform;
        if (option.title) {
            uni.setNavigationBarTitle({
                // 更改当前页面标题
                title: option.title
            })
        }
        this.urls = decodeURIComponent(option.url) || null
    },
    onShow() {},
    methods: {}
}
</script>

<style lang="scss" scoped>
// start--H5微信浏览器上打开支付的弹框
.weixin-tip {
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    right: 20px;
    width: 265px;
    padding: 75px 0 0;
    text-align: left;
    margin-bottom: 30px;
    font-size: 14px;
    background: url()
        no-repeat right top;
    background-size: 45px 68px;
}

.weixin-tip-img {
    padding: 110px 0 0;
}

.weixin-tip-img::after {
    display: block;
    margin: 15px auto;
    content: ' ';
    background-size: cover;
}

.weixin-tip-img.iphone::after {
    width: 150px;
    height: 150px;
    background-image: url();
}

.weixin-tip-img.android::after {
    width: 173px;
    height: 240px;
    background-image: url();
}
// end--H5微信浏览器上打开支付的弹框
</style>
